<template>
  <div class="user_info">
    <el-card class="user">
      <div class="vatar">
        <div><img src="../../../../assets/image/home/city.png" alt="头像"></div>
        <div class="title">
          <div style="font-weight: 600;">{{ loginStore.username }}</div>
          <div class="role">{{ loginStore.role }}</div>
        </div>
      </div>
      <div class="info">
        <div>上次登录时间：<em style="font-weight: 600;">{{ loginStore.lastTime }}</em></div>
        <div>上次登录地点：<em style="font-weight: 600;">{{ loginStore.lastAddress }}</em></div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="userInfo">
import { login } from '@/store'
const loginStore = login()



</script>

<style scoped lang="less">
.user_info {
  .user {
    width: 100%;
    height: 250px;

    .vatar {
      display: flex;
      padding: 20px;
      border-bottom: 2px solid #eee;

      img {
        width: 80px;
        height: 80px;
      }

      .title {
        font-size: 18px;
        margin-left: 20px;
        margin-top: 20px;

        .role {
          font-size: 14px;
        }
      }
    }

    .info {
      div:first-child {
        margin-top: 20px;
        margin-bottom: 20px;
      }

      div {
        span {
          margin-left: 30px;
        }
      }
    }
  }
}
</style>
